<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>01-移动端输入密码</title>
		<style></style>
	</head>

	<body>
		<div id="box">
			<input type="text" autofocus id="one" oninput="get()" class="abc" />
			<input type="text" />
			<input type="text" />
			<input type="text" />
			<input type="text" />
			<input type="text" />
		</div>
		<script>
			let pre = null;
			let inputs = document.getElementsByTagName('input');
			for (let i = 0; i < inputs.length; i++) {
				inputs[i].oninput = function () {
					let v = this.value;
					if (v.length > 0) {
						this.value = v.substr(0, 1);
						let next = this.nextElementSibling;
						pre = this; //保存当前input
						if (next) {
							next.focus();
						} else {
							this.blur();
						}
					}
				};
			}
			window.onkeyup = function (e) {
				if (e.keyCode === 8) {
					pre.value = '';
					pre.focus();
					pre.previousElementSibling ? (pre = pre.previousElementSibling) : pre.focus();
				}
			};
		</script>

		<!-- 老师的版本 -->

		<!-- <div id="box">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
    </div>
    <script>
        let curInput = null;
        //获取所有的input
        const inputs = document.getElementsByTagName('input');
        // for(let i=0;i<inputs.length;i++){

        // }
        //遍历数组，为每一个input绑定input事件
        for (let input of inputs) {
            // console.log('input', input)
            input.oninput = function () {
                // console.log(1)
                curInput = input.nextElementSibling;
                // console.log(curInput)
                //如果下一个兄弟节点为null,则让最后一个input框失去焦点
                if (curInput === null) {
                    input.blur();
                } else { //获取下一个兄弟节点，并然他聚焦
                    input.nextElementSibling.focus();
                }
            }
        }
        //回退
        window.onkeyup = function (e) {
            // console.log('e', e)
            if (e.keyCode === 8) { //说明按得是回退按钮
                //获取当前input框的上一个兄弟节点，然后让上一个兄弟节点聚焦，并且清空value
                console.log('curInput', curInput)
                let gridle = curInput === null ? document.getElementById('box').lastElementChild : curInput
                    .previousElementSibling;
                // if (curInput === null) {
                //     //获取最后一个input 框，然后聚焦并清空value
                //     const lastInput = document.getElementById('box').lastElementChild;
                //     // lastInput.focus();
                //     // lastInput.value = "";
                //     // curInput = lastInput;
                //     gridle = lastInput
                // } else {
                //     // curInput.previousElementSibling.focus();
                //     // curInput.previousElementSibling.value = "";
                //     // curInput = curInput.previousElementSibling;
                //     // console.log('curInput', curInput)
                //     gridle = curInput.previousElementSibling;
                // }
                if (!gridle) return;
                gridle.focus()
                gridle.value = "";
                curInput = gridle;

            }
        }
    </script> -->
	</body>
</html>
